<script setup>
/**
 * & 文件引入区域
 */

import { ToastFun } from "@/hook/toast";
import { onMounted, ref } from "vue";

/**
 * & 注册区
 */
const props = defineProps(["top_boxShadow", "topNum", "moreBtn", "data"]);
const emitFun = defineEmits(["ProcessingFun"]);

/**
 * & 变量声明区
 */
let isItemShow = ref(null); // 控制选项下拉框显示隐藏
let selectItem = ref(); // 下拉选项卡数组
let selectItemId = ref(); // 选择的筛选条件的下标
let pidVl = ref(); // 用于区分不同选框下的item样式

/**
 * & 函数区
 */
// 控制下拉框方法
const isItemShowFun = (i) => {
  // 点击判断后 添加样式
  isItemShow.value = i == isItemShow.value ? null : i;

  // 判断是否为空
  if (isItemShow.value != null) {
    selectItem.value = props.data[isItemShow.value].items;
  } else {
    selectItem.value = [];
  }
};

// 传id给父组件，改变数据
const ProcessFun = (id, pid) => {
  // 记录父级id用于区分items样式
  pidVl.value = pid;

  // 轻提示
  ToastFun("Loading", {
    msg: "",
    onClose: () => {
      if (isItemShow.value != null) {
        selectItemId.value = id == selectItemId.value ? null : id;

        // console.log(selectItemId.value, "父级id==>", pid);
        emitFun("ProcessingFun", isItemShow.value, selectItemId.value);
      }
      isItemShow.value = null;
    },
  });
};
</script>

<template>
  <!-- 
    选项框组件
    top_boxShadow: 组件的top值，用来判断是否给阴影,若组件是在页面顶部，一般传0即可
    topNum: 粘性定位值，不写默认不定位
    moreBtn: 是否显示“更多”按钮，不写默认不显示
    data: 用于渲染选项
  -->
  <div
    :class="['selectBox', top_boxShadow ? 'top_boxShadow' : '']"
    :style="{
      position: 'sticky',
      top: topNum + 'rem',
    }"
  >
    <div class="content">
      <div
        v-for="(item, i) in data"
        :key="i"
        :class="['item', i == isItemShow ? 'con' : '']"
        @click="isItemShowFun(i)"
      >
        <div class="title">{{ $t(item.title) }}</div>

        <img
          v-if="i == 0"
          src="/images/Home/箭头bottom_con.png"
          alt=""
          class="btn"
        />

        <img v-else src="/images/Home/箭头bottom.png" alt="" class="btn" />
      </div>
    </div>

    <div class="selectItem" v-show="isItemShow != null">
      <div
        v-for="item in selectItem"
        :class="[
          'item',
          item.bid == selectItemId && isItemShow == pidVl ? 'con' : '',
        ]"
        :key="item.bid"
        @click="ProcessFun(item.bid, isItemShow)"
      >
        <div class="btn"></div>
        <div class="text">{{ $t(item.title) }}</div>
      </div>
    </div>

  
    <!-- <div class="moreBtn" v-if="moreBtn">
      <img src="/images/Home/设置配置.png" alt="" />
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
.selectBox {
  position: relative;
  padding: 0 16rem;
  background: #fff;
  padding-bottom: 12rem;

  transition: all 0.9;
  box-shadow: none;

  > .content {
    display: flex;
    padding-right: 50rem;
    overflow-x: scroll;

    > .item {
      position: relative;
      padding: 8rem 33rem 6rem 16rem;
      margin-right: 12rem;
      border-radius: 16rem;
      background: #f5f5f5;

      > .title {
        font-size: 14rem;
        line-height: 18rem;

        white-space: nowrap;
      }

      img.btn {
        width: 8rem;
        height: 4rem;

        position: absolute;
        right: 20rem;
        top: 0;
        bottom: 0;
        margin: auto;
      }

      &.con {
        background: #d1c0dd;
        color: rgba(84, 27, 128, 1);
      }
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  > .selectItem {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 12rem 38rem 0rem 12rem;

    position: absolute;
    left: 16rem;
    right: 16rem;
    bottom: -112rem;
    z-index: 100;

    min-height: 92rem;
    max-height: 92rem;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      display: none;
    }

    background: #f5f5f5;
    border-radius: 12rem;

    > .item {
      width: 30%;

      display: flex;
      align-items: center;
      margin-bottom: 16rem;

      height: max-content;

      font-size: 14rem;
      font-weight: 400;
      line-height: 20rem;
      color: #999;

      white-space: nowrap;

      > .btn {
        width: 10rem;
        height: 10rem;
        border: 1rem solid #999;
        border-radius: 50%;
        margin: 0 6rem;

        position: relative;
      }

      &.con {
        color: rgb(84, 27, 128);

        > .btn {
          border-color: #d1c0dd;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;

            width: 4rem;
            height: 4rem;
            border-radius: 2rem;
            background: #d1c0dd;
          }
        }
      }
    }
  }

  .moreBtn {
    width: 58rem;
    height: 44rem;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    right: 0rem;
    bottom: 6rem;
    box-shadow: -6rem 0rem 10rem -5rem #f0f0f0;
  }
}
</style>
